<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>模板语法</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
        <span>文本插值语法（双大括号mustach语法）：{{rawHtml}}</span><br>
        <p>使用v-text指令渲染内容:<span v-text = "rawHtml"></span></p>
        <p>使用v-html指令渲染HTML内容:<span v-html = "rawHtml"></span></p>
      <!--属性绑定-->
      <div title="这是title" id="articl-01">文章</div>   
      <div v-bind:title="title" v-bind:id="id">文章(使用指令实现属性绑定)</div>
      <button v-bind:disabled="isDisabled">绑定boolean类型</button>
      <div v-bind="objAttrs">绑定对象实现多属性绑定</div>
      <button :disabled="isDisabled" :="objAttrs">v-bind :可以简写为: ：(冒号)</button> 
      
      <!--Java Script表达式-->
       <div>
         js 表达式：number + 1 = {{'year ' + number +1}}<br>
         ok? = {{number > 2023 ? 'yes' : 'no'}}<br>
         <!--需求：对msg变量先拆分，反转，再合并：-->
         插值语法中调用函数：{{ msg.split('').reverse().join('') }}
         <div :id="`a-${id}`" :title="getTiTle()">
             在属性值中使用模板字符串
         </div>
       </div>
       <!--指令：是带有'v-'前缀的特殊属性-->
       <p v-if="seen">v-if（条件渲染）的使用:为true时渲染，为flase时不渲染</p>
       <p v-show="seen">v-show（条件渲染）的使用:根据其值改变css中的display属性值</p>
       <p v-on:click="getTiTle">v-on绑定事件监听器 v-on:click="getTiTle"</p>
       <p @click="getTiTle">v-on可以缩写为@，语法：click="getTiTle"</p>
    </div>

    <!--动态参数-->
    <div v-bind:[attributename]="attributeVal">动态参数之 v-bind:[attributename]="attributeVal"</div>
    <div :[attributename]="attributeVal">动态参数之 v-bind 简写语法:[attributename]="attributeVal"</div>
    <div v-on:[eventname]="getTiTle">动态参数之 v-on绑定事件监听器 v-on:[attributename]="getTiTle"</div>
    <div @[eventname]="getTiTle">动态参数之 v-on绑定事件监听器 @[eventname]="getTiTle"</div>
    </body>
    <script>
        //Vue.createApp({/*根组件选项});
        //选项式API
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  msg:"hello Vue.js!",
                  rawHtml: '<span style="color: red">Hello Vue.js!</span>',
                  title: 'title状态',
                  id: 'a-01',
                  isDisabled: '',
                  objAttrs: {
                    title: '文章标题',id: '文章id'
                  },
                  number: 2024,
                  ok: true,
                  aId: 'a-01',
                  seen :false,
                  attributename: 'title',
                  attributeVal: 'a-01',
                  eventname: 'click',
              }
           },
           methods:{
             getTiTle(){
                console.log('getTiTle......');
                return"函数返回titlr"
             }
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>